<template>
	<view>
			<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
				<view class="mt-5" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
				</view>
				<view v-else>
					<view class="" v-if="order_detail">
					<view class="m-2 bg-white rounded-20">
						<view class="d-flex a-center today_title p-2 rounded-top">
							<view class="rounded-50 d-flex user_img j-center a-center">
								<u-icon name="coupon" color="#ff6b69" size="35"></u-icon>
							</view>
							<view class="font-md font-weight">【普通】订单状态：{{order_detail.label_order_status}}</view>
						</view>
						<view class="bg-white d-flex j-sb p-3 rounded-bottom a-center">
							<view class="">
								<view class="d-flex pb-1">
									<u-icon name="map" color="#" size="35"></u-icon>
									<view class="ml-2 font-md font-weight">{{order_detail.consignee}}&nbsp;&nbsp;&nbsp;{{order_detail.mobile}}</view>
								</view>
								<view class="text-muted font-29">{{order_detail.consignee_item.province+order_detail.consignee_item.city+order_detail.consignee_item.district+order_detail.address}}</view>
							</view>
							<view v-if="!(order_detail.label_order_status==='待收货'||order_detail.label_order_status==='已完成')"  class=""  @click="address(order_id)">
								<u-icon  name="arrow-right" color="#888888" size="35"></u-icon>
							</view>
						</view>
					</view>
					<!-- 物流信息 -->
					<view v-if="order_detail.label_order_status==='待收货'||order_detail.label_order_status==='已完成'" class="flow d-flex m-2  j-sb p-2 rounded-20 text-white" @click="popupFlow(order_id)">
						<view class="">
							<view class="d-flex">
								<u-icon name="map" color="#" size="35"></u-icon>
								<view class="ml-2 font-md font-weight">查看详细物流</view>
							</view>
							<view class="font-weight font ml-5">{{order_detail.shipping_name}}&nbsp;&nbsp;({{order_detail.invoice_no[0]}})</view>
						</view>
						<u-icon name="arrow-right" color="#fff" size="35"></u-icon>
					</view>	
					
					<view class="m-2 rounded-20 py-4 pl-3 bg-white font-md">
						<view class="d-flex">
							<view class="">订单编号:</view>
							<view class="ml-6 font-weight">{{order_detail.order_sn}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="py-2">下单时间:</view>
							<view class="ml-6 font-weight border-bottom flex-1 py-3">{{order_detail.formated_add_time}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="">支付方式:</view>
							<view class="ml-6 font-weight">{{order_detail.pay_name}}</view>
						</view>
						<view class="d-flex pb-3" v-if="order_detail.formated_pay_time">
							<view class="">支付时间:</view>
							<view class="ml-6 font-weight">{{order_detail.formated_pay_time}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="pb-2">订单来源:</view>
							<view class="ml-6 font-weight border-bottom flex-1 pb-3">{{order_detail.label_order_source}}</view>
						</view>
						<view class="d-flex ">
							<view class="pb-2">配送方式:</view>
							<view class="ml-6 font-weight border-bottom flex-1 pb-3">{{order_detail.shipping_name}}</view>
						</view>
						<view class="d-flex py-3">
							<view class="">发票抬头:</view>
							<view class="ml-6 font-weight">{{order_detail.inv_title_type.personal==="personal"?order_detail.inv_title_type.personal:"个人"}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="pb-2">发票识别码:</view>
							<view class="ml-4 font-weight border-bottom flex-1 pb-3">{{order_detail.inv_tax_no===''?"无":order_detail.inv_tax_no}}</view>
						</view>
						<view class="d-flex ">
							<view class="">订单备注:</view>
							<view class="ml-6 font-weight">{{order_detail.postscript===''?"无":order_detail.postscript}}</view>
						</view>
					</view>
					<view class="m-2 pl-3 bg-white rounded-20">
						<view class="border-bottom py-3 d-flex j-sb a-center" @click="client">
							<view class="d-flex a-center">
								<view class="rounded-50 d-flex user_img j-center a-center">
									<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
								</view>
								<view class="font-weight ml-2">{{order_detail.mobile}}</view>
							</view>
							<view class="mr-2">
								<u-icon name="arrow-right" color="#777777" size="35"></u-icon>
							</view>
						</view>	
						<view class="border-bottom py-2 j-sb" v-for="(item,index) in order_detail.goods_items" :key="index">
							<view class="d-flex">
								<view class="">
									<image class="detail_hot rounded-20"  :src="item.img.url" mode=""></image>
								</view>
								<view class="ml-2 flex-1 font-28">
									<view class="ellipsis">{{item.name}}</view>
									<view class="text-muted font-29">{{item.goods_attr}}</view>
									<view class="d-flex j-sb pt-2">
										<view class="font-weight">{{item.formated_shop_price}}</view><view class="text-muted j-end mr-3">x{{item.goods_number}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="border-bottom py-2 font-28 font-md">
							<view class="d-flex j-sb mr-2 pt-3">
								<view class="">商品总金额:</view>
								<view class="font-weight">{{order_detail.formated_goods_amount}}</view>
							</view>
							<view class="d-flex j-sb mr-2 pt-3">
								<view class="">运费:</view>
								<view class="font-weight">+{{order_detail.formated_shipping_fee}}</view>
							</view>
							<view class="d-flex j-sb mr-2 pt-3">
								<view class="">发票:</view>
								<view class="font-weight">+{{order_detail.formated_pay_fee}}</view>
							</view>
							<view class="d-flex j-sb mr-2 pt-3">
								<view class="">积分:</view>
								<view class="font-weight">-{{order_detail.formated_integral_money}}</view>
							</view>
							<view class="d-flex j-sb mr-2 pt-3">
								<view class="">红包:</view>
								<view class="font-weight">-{{order_detail.formated_bonus}}</view>
							</view>
							<view class="d-flex j-sb mr-2 pt-3">
								<view class="">折扣:</view>
								<view class="font-weight">-{{order_detail.formated_discount}}</view>
							</view>
						</view>
						<view class="d-flex j-end mr-2 py-2">
							合计：&nbsp;<text class="font-weight">{{order_detail.total_fee}}</text>
						</view>
					</view>	
					</view>
					<view v-else class="d-flex flex-column w-100 a-center j-center h-80">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">加载中</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部 -->
			<view class="bg-white footer" :class="Device.model=='iPhone X'?'footerX':''">
				<view class="py-2 bg-white w-100" v-if="order_detail.label_order_status=='待发货'">
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="pyment(order_id)">发货</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="appoint(order_id)">{{order_detail.is_grab?'取消指派订单':'指派订单'}}</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="option">更多操作</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100" v-else-if="order_detail.label_order_status=='待付款'">
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="order_payment(order_id)">付款</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="order_mouse(order_id)">改价</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="option">更多操作</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100" v-else-if="order_detail.label_order_status=='待收货'">
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="popupFlow(order_id)">查看物流</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="option">更多操作</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100" v-else-if="order_detail.label_order_status=='已完成'">
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="popupFlow(order_id)">查看物流</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="option">更多操作</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100" v-else-if="order_detail.label_order_status=='已取消'">
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="popupRecord(order_id)">备注</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="option">更多操作</view>
					</view>
				</view>
			</view>
		
		<!-- 更多操作 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="shareShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share py-2">
				<!-- 待发货 -->
				<view class="border-bottom d-flex py-4" v-if="order_detail.label_order_status==='待发货'">
					<view class="text-center span-5" @click="shipments(order_id)">
						<image  src="../../static/images/order/send_out.png" mode=""></image>
						<view class="">发货</view>
					</view>
					<view class="text-center span-5" @click="address(order_id)">
						<image src="../../static/images/order/edit_map.png" mode=""></image>
						<view class="">修改地址</view>
					</view>
					<view class="text-center span-5" @click="popupClose(order_id)">
						<image src="../../static/images/order/closed.png" mode=""></image>
						<view class="">关闭</view>
					</view>
				</view>
				<!-- 待付款 -->
				<view class="border-bottom d-flex py-4" v-else-if="order_detail.label_order_status==='待付款'">
					<view class="text-center flex-1" @click="order_payment(order_id)">
						<image  src="../../static/images/order/payment.png" mode=""></image>
						<view class="">付款</view>
					</view>
					<view class="text-center flex-1" @click="order_mouse(order_id)">
						<image src="../../static/images/order/change_price.png" mode=""></image>
						<view class="">改价</view>
					</view>
					<view class="text-center flex-1" @click="address(order_id)">
						<image src="../../static/images/order/edit_map.png" mode=""></image>
						<view class="">修改地址</view>
					</view>
					<view class="text-center flex-1" @click="popupClose(order_id)">
						<image src="../../static/images/order/closed.png" mode=""></image>
						<view class="">关闭</view>
					</view>
				</view>
				<!-- 待收货 已完成 -->
				<view class="border-bottom d-flex py-4" v-else-if="order_detail.label_order_status==='待收货'||order_detail.label_order_status==='已完成'">
					<view class="text-center span-5" @click="popupFlow(order_id)">
						<image src="../../static/images/order/logistics.png" mode=""></image>
						<view class="">查看物流</view>
					</view>
				</view>
				
				<view class="d-flex py-4">
					<view class="text-center flex-1" @click="client(order_id)">
						<image src="../../static/images/order/customer.png" mode=""></image>
						<view class="">客户详情</view>
					</view>
					<view class="text-center flex-1" @click="contact">
						<image src="../../static/images/order/connection.png" mode=""></image>
						<view class="">联系买家</view>
					</view>
					<view class="text-center flex-1" @click="popupRecord(order_id)">
						<image src="../../static/images/order/operation.png" mode=""></image>
						<view class="">操作记录</view>
					</view>
					<view class="text-center flex-1" @click="refresh(order_id)">
						<image src="../../static/images/order/refresh.png" mode=""></image>
						<view class="">刷新</view>
					</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25 text-primary" @click="cancelShare">
				取消
			</view>
		</s-popup>
		<u-modal v-model="close" title="提示" show-title="false"  show-confirm-button show-cancel-button cancel-color confirm-color @confirm="close_comfirm">
			<view class="py-3">
				<view class="text-center">确定要取消派单吗?</view>
			</view>
		</u-modal>
		
		<u-modal v-model="contact_show"  confirm-text="呼叫" :show-title="false" @confirm="contact_comfirm" show-confirm-button show-cancel-button cancel-color="#2b85e4" confirm-color="#2b85e4">
			<view class="py-5">
				<view class="text-center">{{order_detail.mobile}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
				sPopup
		},
		data() {
			return {
				shareShow:false,
				order_id:"", // 订单ID
				order_detail:"", // 订单详情列表
				close:false, // 取消指派订单
				contact_show:false, // 联系买家
				scrollHeight:0, // 屏幕高度
				Device:JSON.parse(uni.getStorageSync("client")),
				u_loadmore:true, // 加载中
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods: {
			// 客户详情
			client(){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-client?user_id="+this.order_detail.user_id
				})
			},
			// 发货
			pyment(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-today-shipments?order_id="+order_id
				})
			},
			close_comfirm(){
				this.$H.post("admin/order/operate/cancelgrab",{
					order_id:this.order_id
				}).then(res=>{
					this.$H.post("admin/orders/detail",{id:this.order_id}).then(res=>{
						console.log(res)
						this.order_detail=res.data
					})
					console.log("取消",res)
				})
			},
			// 指派订单
			appoint(order_id){
				if(this.order_detail.is_grab){
					this.close=true
				}else{
					this.shareShow=false
					uni.navigateTo({
						url:"/pagesA/order/order-appoint?order_id="+order_id
					})
				}
			},
			// 编辑地址
			editMap(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-edit-map?order_id="+order_id
				})
			},
			// 修改地址
			address(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-modifyaddress?order_id="+order_id
				})
			},
			// 关闭订单
			popupClose(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-close?order_id="+order_id
				})
			},
			
			// 付款
			order_payment(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-confirm?order_id="+order_id
				})
			},
			// 改价
			order_mouse(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-mouse?order_id="+order_id
				})
			},
			// 物流信息
			popupFlow(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-flow?order_id="+order_id
				})
			},
			// 操作记录
			popupRecord(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-record?order_id="+order_id
				})
			},
			// 联系买家
			contact(){
				this.contact_show=true
			},
			// 确认呼叫
			contact_comfirm(){
				this.shareShow=false
				uni.makePhoneCall({
				    phoneNumber: this.order_detail.mobile //仅为示例
				});
			},
			// 打开弹框
			option(){
				this.shareShow=true
			},
			// 关闭弹框
			cancelShare(){
				this.shareShow=false
			},
			// 刷新
			refresh(){
				this.shareShow=false
				uni.showLoading({
					title:"刷新中",
					success: () => {
						this.$H.post("admin/orders/detail",{id:this.order_id}).then(res=>{
							console.log(res)
							this.order_detail=res.data
						})	
					}
				})
				setTimeout(function () {
				    uni.hideLoading();
				}, 2000);
			}
		},
		onShow() {
			if(this.order_id){
				this.$H.post("admin/orders/detail",{id:this.order_id}).then(res=>{
					this.order_detail=res.data
				})
			}
		},
		onLoad(e) {
			this.order_id=e.order_id
			this.$H.post("admin/orders/detail",{id:e.order_id}).then(res=>{
				this.order_detail=res.data
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.user_img{
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background: linear-gradient(to right,#ffeee9,#ffd3cc);
	}
	.detail_hot{
		width: 150upx;
		height: 150upx;
	}
	.footer{
		height: 100upx;
	}
	.footerX{
		height: 120upx;
	}
	.flow{
		background-image: linear-gradient(to right,#ef2b4d,#f66143);
	}
	.s-popup-mask{
		background: rgba(204,204,204,0.3)!important;
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	
</style>
